<template>
  <el-menu
    :default-active="defaultActive"
    @open="handleOpen"
    @close="handleClose"
    router
    background-color="#666"
    text-color="#fff"
    active-text-color="#221714"
    style="height: 100%">

    <el-submenu index="1" v-if="show(1,2)">
      <template slot="title">
        <span>展品设置</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/exhibit/category" v-if="show(1)">
          <span slot="title">分类设置</span>
        </el-menu-item>
        <el-menu-item index="/exhibit/exhibitList" v-if="show(2)">
          <span slot="title">展品信息设置</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-menu-item index="/area" v-if="show(3)">
      <span slot="title">区域设置</span>
    </el-menu-item>
    <el-submenu index="4" v-if="show(4,5)">
      <template slot="title">
        <span>ibeacon设置</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/ibeacon/model" v-if="show(4)">
          <span slot="title">型号设置</span>
        </el-menu-item>
        <el-menu-item index="/ibeacon/index" v-if="show(5)">
          <span slot="title">ibeacon设置</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="6" v-if="show(6)">
      <template slot="title">
        <span>布展</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/arrangement/index">
          <span slot="title">设置普通展</span>
        </el-menu-item>
        <el-menu-item index="/arrangement/special">
          <span slot="title">设置特展</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="7">
      <template slot="title">
        <span>其他设置</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/others/games" v-if="show(7)">
          <span slot="title">多人游戏设置</span>
        </el-menu-item>
        <el-menu-item index="/others/apps" v-if="show(8)">
          <span slot="title">App版本设置</span>
        </el-menu-item>
        <el-menu-item index="/others/startup">
          <span slot="title">启动页设置</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>

    <el-submenu index="9">
      <template slot="title">
        <span>账户设置</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/settings/customer" v-if="show(9)">
          <span slot="title">登录账户设置</span>
        </el-menu-item>
        <el-menu-item index="/settings/charactor" v-if="show(10)">
          <span slot="title">角色权限</span>
        </el-menu-item>
        <el-menu-item index="/settings/passwordModify" >
          <span slot="title">修改密码</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-menu-item index="/feedback">
      <span slot="title">意见反馈</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
  import {getStore} from '@/utils/storage';

  export default {
    name:'AppNav',
    data() {
      return {
        defaultActive: '',
        privileges: ''
      }
    },
    mounted() {
      this.defaultActive = this.$route.path;
    },
    methods: {
      handleOpen(key, keyPath) {
        //console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        //console.log(key, keyPath);
      },
      show() {
        return this.privileges === "all" ? true : Array.from(arguments).some((v) => { return this.privileges.includes(v); });
      }
    },
    watch: {
      "$route"(to,from){
        this.defaultActive = to.path;
      }
    },
    created() {
      let userData = getStore('user_museum');
      let privileges = userData && JSON.parse(userData).privileges;
      if( privileges ){
        this.privileges = privileges === "all" ? "all" : privileges.split(',').map( (v)=>{ return +v } ); // 获取权限数据
      }else{
        this.privileges = []
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-menu {
    width: 200px;
    /*height: 100vh;*/

    a, a:hover, a:visited {
      color: white;
      text-decoration: none;

      &.router-link-exact-active {
        color: hsl(25, 80%, 50%);
      }
    }
  }

</style>
<style>
  .el-menu .el-menu-item-group__title{
    padding:0;
  }
  .el-submenu__title{
    text-align: left;
  }
</style>
